import React, { memo, useCallback } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { ArtistMvWrapper, ContentWrapper } from './style'
import Page from '@/components/page'
import {getArtistMvsAction} from '../../store/actionCreators'
export default memo(function ArtistMv() {
  const { artistMvs,artistDetail,artistId } = useSelector(state => ({
    artistMvs: state.getIn(['artist', 'artistMvs']),
    artistDetail: state.getIn(['artist', 'artistDetail']),
    artistId:state.getIn(['artist','artistId'])
  }), shallowEqual)
  const dispatch = useDispatch()
  const pageChange = useCallback((page) => {
    const offset = (page - 1) * 12
    dispatch(getArtistMvsAction(artistId,offset))
  },[dispatch,artistId])
  const mvs = artistMvs || []
  return (
    <ArtistMvWrapper>
      <ContentWrapper>
      {
        mvs.map(item => {
          return (
            <div className="item" key={item.id}>
              <img src={item.imgurl} alt="" />
              <div className="mask sprite_covor"></div>
              <div className="name text-nowrap">{item.name}</div>
              <div className="play sprite_icon"></div>
            </div>
          )
        })
      }
      </ContentWrapper>
      <Page pageSize={12} pageChange={pageChange} totalCount={ artistDetail.mvSize}/>
    </ArtistMvWrapper>
  )
})
